/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef, useEffect } from 'react';
import DragTable from '@/components/DragTable';
import ProTable from '@ant-design/pro-table';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import { deliveryRecord } from '@/services/jdk/warn';
import { message, Popover, Space } from 'antd';

interface WarnReacrd {
  current: string;
}
interface TableColumns {
  title_name: string;
  source_brands: string;
  source_config: [];
  update_at: string;
}
const Index: React.FC<WarnReacrd> = ({ current }) => {
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<TableColumns>[] = [
    {
      title: '设置区域',
      dataIndex: 'title_name',
      align: 'center',
      width: '30%',
      search: false,
    },
    {
      title: '设置运力',
      dataIndex: 'source_brands',
      align: 'center',
      width: '40%',
      search: false,
      render: (_, record) => {
        const { source_brands, source_config = [] } = record;
        return (
          <Popover
            content={
              <Space direction='vertical'>
                {source_config.map((item) => {
                  const { source_brand_name, limit_kilometre, limit_price } = item;
                  return source_brand_name + limit_kilometre + '公里以内' + limit_price + '元';
                })}
              </Space>
            }
          >
            {source_brands}
          </Popover>
        );
      },
    },
    {
      title: '设置时间',
      dataIndex: 'update_at',
      align: 'center',
      width: '30%',
      search: false,
    },
  ];

  const getList = (value: any) => {
    const { current: page, pageSize: size } = value;
    return deliveryRecord({ page, size }).then((res) => {
      const { code, data, msg } = res;
      if (code == 0) {
        const { list } = data;
        return {
          ...data,
          data: list,
        };
      } else {
        message.error(msg);
      }
    });
  };

  useEffect(() => {
    console.log(current, '-');
    if (current === 'records') {
      actionRef.current?.reload();
    }
  }, [current]);

  return (
    <DragTable>
      <ProTable<TableColumns>
        className='kb-pro-table'
        actionRef={actionRef}
        pagination={{
          pageSize: 20,
          showSizeChanger: false,
        }}
        rowKey='id'
        request={getList}
        columns={columns}
        options={false}
        scroll={{ x: 1200 }}
        search={false}
      />
    </DragTable>
  );
};

export default Index;
